<template>
	<view class="msgScroll" @click="noticeClick">
		<view class="msgScroll-item">
			<image class="msgScroll-item-image" src="@/static/images/chat_message.png"></image>
			<view class="msgScroll-item-info">
				<view class="msgScroll-item-info-name uv-line-1">互动消息</view>
				<view class="msgScroll-item-info-content uv-line-1"> {{title?title:'没有新消息'}} </view>
			</view>
			<view class="msgScroll-item-count msgScroll-item-arrow">
				<uv-icon name="arrow-right" color="#999999" size="28rpx" v-if="count==0"></uv-icon>
				<view class="unreadCount" v-else>
					<uv-badge type="error" max="99" :value="count"></uv-badge>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { onShow } from '@dcloudio/uni-app'
	import { ref } from "vue";
	const title = ref('')
	const count = ref(0)
	import { unreadCountAPI } from '@/api/chat.js'
	onShow(async () => {
		let res = await unreadCountAPI({ type: 2 })
		if (res.code == 200) {
			title.value = res.data.last_text
			count.value = res.data.count
		}
	})

	const noticeClick = () => {
		uni.navigateTo({
			url: '/pages/chat/interactionmessage/index'
		})
	};
</script>
<style scoped lang="scss">
	.msgScroll {
		width: 100%;
		height: 144rpx;

		&-item {
			box-sizing: border-box;
			padding: 24rpx 24rpx 0 24rpx;
			display: flex;

			&-image {
				width: 100rpx;
				height: 100rpx;
				flex-shrink: 0;
				border-radius: 50%;
			}

			&-info {
				width: 100%;
				display: flex;
				align-content: space-between;
				box-sizing: border-box;
				padding: 4rpx 0;
				margin-left: 24rpx;
				font-weight: 400;
				flex-wrap: wrap;

				&-name {
					width: 100%;
					font-size: 32rpx;
					color: #222222;
				}

				&-content {
					font-size: 28rpx;
					color: #999999;
				}
			}

			&-count {
				display: flex;
				flex-shrink: 0;
				flex-wrap: wrap;
				box-sizing: border-box;
				padding-top: 10rpx;
				padding-bottom: 8rpx;

				align-content: space-between;
				justify-content: flex-end;

				&-time {
					text-align: right;
					width: 100%;
					font-weight: 400;
					font-size: 24rpx;
					color: #999999;
				}
			}

			&-arrow {
				align-items: center;
				align-content: unset !important;
			}
		}
	}
</style>